<template>
  <div class="main">
    <el-table
      v-loading="loading"
      :data="dataList"
      :header-cell-style="{
        color:'#000',background:'#f6fdfd',height:'44px'
      }"
      :row-style="{
        height:'50px'
      }"
    >
      <el-table-column label="序号" type="index" width="244"></el-table-column>
      <el-table-column label="标的发布名称" prop="bidTitle" width="530"></el-table-column>
      <el-table-column label="结束时间" prop="bidBidding.endDate"></el-table-column>
      <el-table-column label="状态" >
        <template  slot-scope="scope">
          <span v-if="scope.row.status === '0' && scope.row.filesList.length === 0" style="color: #E4931B">报名成功</span>
          <span v-if="scope.row.status === '0' && scope.row.filesList.length > 0" style="color: #666">{{ getDictValue(scope.row.status) }}</span>
          <span v-if="scope.row.status === '1'" style="color: #1B85E8;">{{ getDictValue(scope.row.status) }}</span>
          <span v-if="scope.row.status === '2'" style="color: #999;">{{ getDictValue(scope.row.status) }}</span>
          <span v-if="scope.row.status === '3'" style="color: #17C2AA;">{{ getDictValue(scope.row.status) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" style="color: #1dd0b7;" type="text" @click="handleTableRow(scope.row)">
            <template v-if="scope.row.status === '0' && scope.row.filesList.length === 0">
              提交资料
            </template>
            <template v-if="( scope.row.status === '0' && scope.row.filesList.length > 0 ) || scope.row.status === '1' || scope.row.status === '2'">
              查看
            </template>
            <template v-if="scope.row.status === '3'">
              --
            </template>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getData"
    />
  </div>
</template>

<script>
import {listBidding} from '@/api/bid/enterprise'
import { mapGetters } from 'vuex'

export default {
  name: "myBidding",
  data() {
    return {
      loading:true,
      dataList:[],
      queryParams:{
        pageNum:1,
        pageSize:20
      },
      total:0,
    }
  },
  created() {
    this.getData()
    this.getDicts('bid_status').then(response => {
        this.bidStatus = response.data
    })
  },
  methods: {
    getData(){
      this.queryParams.enterpriseId = this.userId
      this.queryParams.category = "2"
      listBidding(this.queryParams).then(res=>{
        console.log(res);
        this.dataList = res.rows
        this.total = res.total
        this.loading = false
      })
    },
    handleTableRow(row) {
      if (row.status === '0' && row.filesList.length === 0) {
        this.$router.push(`/enterprise/commitFile?id=${row.id}`)
      } else if (row.status === '0' && row.filesList.length > 0) {
        this.$router.push(`/bid/detail?id=${row.bidBidding.id}`)
      } else if (row.status === '1' || row.status === '3') {
        this.$router.push(`/bid/detail?id=${row.bidBidding.id}`)
      } else {
        return;
      }
    },
    getDictValue(key) {
      const dict = this.bidStatus.filter(x => x.dictValue === key.toString())
      if (dict && dict.length > 0) {
        return dict[0].dictLabel
      }
      return ''
    },
  },
  computed: {
    ...mapGetters(['userId'])
  }
}
</script>

<style lang="scss" scoped>
.main{
  width: 90%;
  margin: auto;
}

::v-deep .el-pagination{
  display: flex;
  justify-content: center;
  position: relative;
}

::v-deep .el-pager .active{
  color: #17c2aa;
}
</style>
